<script lang="ts" setup>
import {useForumStore} from "../../store/ForumStore.ts";
import {onMounted, ref, watch} from "vue";
import ForumIconName from "../../components/entrance/ForumIconName.vue";
import {setWindowTitle} from "../../utils/Utils.ts";
import {useRoute} from "vue-router";

const forumStore = useForumStore();
const route = useRoute()
const loading = ref(false)

const request = async (force: boolean = false) => {
  loading.value = true
  await forumStore.favorList(force);
  loading.value = false
}

setWindowTitle("收藏版面")
onMounted(async () => await request())
watch(route, async () => await request())
</script>

<template>
  <div v-loading="loading" class="route-root">
    <h3>收藏版面/合集</h3>
    <div class="forum-entrances">
      <forum-icon-name v-for="forum in forumStore.favorForums" :key="forum.fid" :fid="forum.fid" :name="forum.name" :stid="forum.stid"/>
    </div>
  </div>
</template>

<style scoped>

</style>